---
layout: default
title: GraphicStroke
nav_order: 3
---
<style>
.button-box {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 1rem;
}

.option-input {
  display: inline-block;
  margin-right: 1rem;
  padding: 0.3rem 0.5rem;
  background: #e8e8e8;
  border-radius: 3px;
}

.option-input > label,
.option-input > input {
  cursor: pointer;
}

.option-input.option-checked {
  font-weight: bold;
}
</style>

<div>
  <h1>GraphicStroke</h1>
  <p><a href="assets/spoorwegen-trace.js">View code</a></p>
</div>
<div class="button-box">
    <div class="option-input option-checked">
      <input id="option-mark" name="sld-options" type="radio" value="DEMO_MARK" checked></input>
      <label for="option-mark">Mark</label>
    </div>
    <div class="option-input">
      <input id="option-exgraphic" name="sld-options" type="radio" value="DEMO_EXTERNALGRAPHIC"></input>
      <label for="option-exgraphic">ExternalGraphic</label>
    </div>
    <div class="option-input">
      <input id="option-pointplacement" name="sld-options" type="radio" value="DEMO_POINTPLACEMENT"></input>
      <label for="option-pointplacement">Vendor option: pointPlacement</label>
    </div>
    <div class="option-input">
      <input id="option-alternating-graphicstroke" name="sld-options" type="radio" value="DEMO_ALTERNATING_GRAPHICSTROKE"></input>
      <label for="option-alternating-graphicstroke">Alternating graphics</label>
    </div>
</div>

<div id="olmap"></div>
<textarea id="sld"></textarea>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.41.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.41.0/mode/xml/xml.min.js"></script>
<script src="assets/spoorwegen-trace.js"></script>
